<template>
	<view class="content help-container" :style="{height: `${windowHeight}px`}">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<uni-row class="demo-uni-row">
				<uni-col :span="12">
					<view class="info-box">
						<view class="info-title">设备信息</view>
						<view class="info-content">
							<view>{{ userInfo.deviceName }}</view>
						</view>
						<view>
							<span class="info-title">设备信息:</span>
							<span class="info-content">{{ userInfo.deviceName }}</span>
						</view>
						<view>
							<span class="info-title">所属组织:</span>
							<span class="info-content">{{ userInfo.deptName }}</span>
						</view>
						<view>
							<span class="info-title">设备模版:</span>
							<span class="info-content">{{ userInfo.templatesName }}</span>
						</view>
						<view>
							<span class="info-title">网关:</span>
							<span class="info-content">{{ userInfo.gatewayName || '-' }}</span>
						</view>
						<view>
							<span class="info-title">设备地址:</span>
							<span class="info-content">{{ userInfo.addr || '-' }}</span>
						</view>
						<view>
							<span class="info-title">从机地址:</span>
							<span class="info-content">{{ userInfo.slaveAddress }}</span>
						</view>
						<view>
							<span class="info-title">设备描述:</span>
							<span class="info-content">{{ userInfo.deviceDesc|| '-' }}</span>
						</view>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="image-content">

						<!-- @error="imageError" -->
						<image mode="widthFix" :src="deviceImg" @click="previewImage(index)"></image>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="btns">
			<view class="queryVideo" @click="goVideo()">
				查看监控
			</view>
			<view class="queryVideo" @click="goDetail()">历史数据</view>
		</view>
		<view class="content-section">
			<view class="childList">
				<view class="list-cell">
					<view class="">
						<uni-row class="demo-uni-row">

							<!-- <uni-col :span="6">
		      						<view>变量类型</view>
		      					</uni-col> -->
							<uni-col :span="6">
								<view>变量名称</view>
							</uni-col>
							<uni-col :span="6">
								<view>当前值</view>
							</uni-col>
							<uni-col :span="3">
								<view>单位</view>
							</uni-col>
							<uni-col :span="9">
								<view>时间</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
			<view v-for="(item, findex) in list" :key="findex" :title="item.title" class="childList">
				<view class="list-cell">
					<view class="">
						<uni-row class="demo-uni-row">
							<!-- 	
	        					<uni-col :span="6">
	        						<view>{{ item.variableTypeName }}</view>
	        					</uni-col> -->
							<uni-col :span="6">
								<view>{{ item.variableName }}</view>
							</uni-col>

							<uni-col :span="6">
								<view v-if="item.showDataValue === '0'">{{ item.variableValue }}
								</view>
								<switch v-else-if="item.showDataValue === '1'" :checked="parseInt(item.variableValue)"
									@change="changeIndicatorDots(item)" />
								<view v-else-if="item.showDataValue === '2'">{{ item.variableValue }}
									<span v-if="item.readWriteWayValue === '0'" @click="inputDialogToggle(item)">
										<text style="margin-left: 15rpx; color: blue;">修改</text>
									</span>
								</view>
							</uni-col>
							<uni-col :span="3">
								<view>{{ item.variableUnit || '-' }}</view>
							</uni-col>
							<uni-col :span="9">
								<view>{{ createTime(item.createTime) || '' }}</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
			<view class="action-btn">
				<button @click="getSubDeviceList" class="login-btn cu-btn block bg-blue lg round">刷新</button>
			</view>
		</view>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="" typ type="digit"
					ceholder="请输入要修改的值" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
		
		<uni-popup ref="VideoDialog" type="dialog">
			<view class="VideoDialog">
				<view class="VideoDialog-title">视屏监控通道</view>
				<view v-if="urlData.length" class="VideoDialog-item">
					<view v-for="(item, index) in urlData" :key="index" class="VideoDialog-item-btn1"  :class="[ item.status == 1 ? 'success' : 'error' ]" @click.stop="goLiveid(item)">视频{{ index+1 }}</view>
				</view>
				<view v-if="urlData.length && urlData.length > 4" class="VideoDialog-item">
					<view v-for="(items, indexs) in urlData.slice(4, urlData.length)" :key="indexs" class="VideoDialog-item-btn1"  :class="[ item.status == 1 ? 'success' : 'error' ]" @click.stop="goLiveid(items)">视频{{ indexs+1 }}</view>
				</view>
				<view class="VideoDialog-close" @click="close">关闭</view>
			</view>
		</uni-popup>
	</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		getDeviceInfo,
		getDeviceList,
		udpateValve,
		editValve,
		getVideoUrl
	} from '@/api/device.js'

	export default {
		data() {
			return {
				live: {
					accessToken: '',
					urlData: []
				},
				urlData: [],
				deviceImg: '',
				imageUrls: [],
				localImageUrls: ['/static/images/devicePic.png'],
				userInfo: {
					// "deviceImg":"",
					// "createBy": "",
					// "createTime": "2024-05-27 16:44:51",
					// "updateBy": "",
					// "updateTime": "2024-05-27 18:47:27",
					// "remark": null,
					// "id": 8,
					// "deviceName": "智能控制终端test1",
					// "deptId": 204,
					// "slaveAddress": 1,
					// "deviceNum": "1",
					// "deviceStatus": 0,
					// "deviceDesc": "测试1号",
					// "locationType": 102,
					// "addr": null,
					// "lng": 113.135489,
					// "lat": 29.363178,
					// "templatesId": 49,
					// "gatewayId": 17,
					// "deptName": "测试部门1号",
					// "gatewayName": "测试网关1",
					// "templatesName": "测试模板",
					// "sn": "00500824031100020212"
				},
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				list: [
					// {
					//     "id": 39,
					//     "variableType": 113,
					//     "variableTypeName": "直采变量",
					//     "variableName": "开阀",
					//     "variableValue": "0",
					//     "createTime": "2024-06-03T17:38:01.000+08:00",
					//     "showDataName": "开关",
					//     "showDataValue": "1"
					// }
				],
				indicatorDots: 0,
				currentItem: {},
				canvasBool: false
			}
		},
		onLoad(e) {
			if (e.deviceInfo) {
				let tempVal = JSON.parse(decodeURIComponent(e.deviceInfo))
				this.userInfo = tempVal
				this.deviceImg = "https://iot.weikeauto.com/prod-api" + this.userInfo.deviceImg ||
					'/static/images/devicePic.png'
				this.getSubDeviceList()
			} else if (e.deviceInfoBool) {
				this.canvasBool = true
				let tempVal = JSON.parse(uni.getStorageSync('deviceInfoCanvas'))
				this.userInfo = tempVal
				this.deviceImg = "https://iot.weikeauto.com/prod-api" + this.userInfo.deviceImg ||
					'/static/images/devicePic.png'
				this.getSubDeviceList()
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		methods: {
			createTime(time) {
				const date = new Date(time)
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return date
			},
			previewImage() {
				if (this.userInfo.deviceImg) {
					let urlstr = "https://iot.weikeauto.com/prod-api" + this.userInfo.deviceImg
					this.imageUrls.push(urlstr)
					uni.previewImage({
						current: this.imageUrls[0],
						urls: this.imageUrls
					});
				} else {
					uni.previewImage({
						current: this.localImageUrls[0],
						urls: this.localImageUrls
					});
				}
			},
			onChange(event) {
				this.currentIndex = event.index;
			},
			getSubDeviceList() {
				this.list = []
				getDeviceInfo({
					deviceTemplateId: this.userInfo.templatesId,
					deviceId: this.canvasBool ? this.userInfo.deviceId : this.userInfo.id
				}).then(res => {
					this.$modal.closeLoading()
					this.list = res.rows
				}).catch(() => {

				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
				udpateValve({
					deviceId: this.canvasBool ? this.userInfo.deviceId : this.userInfo.id,
					variableId: e.id,
					variableValue: (e.variableValue === '0' ? '1' : '0')
				}).then(res => {
					this.$modal.closeLoading()
					// this.getSubDeviceList()
				}).catch(() => {

				})
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				this.$refs.message.open()
			},
			inputDialogToggle(item) {
				this.currentItem = item
				this.$refs.inputDialog.open()
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogInputConfirm(val) {
				editValve({
					deviceId: this.canvasBool ? this.userInfo.deviceId : this.userInfo.id,
					variableId: this.currentItem.id,
					variableValue: val
				}).then(res => {
					this.$modal.closeLoading()
					// this.getSubDeviceList()
				}).catch(() => {

				})

				// uni.showLoading({
				// 	title: '3秒后会关闭'
				// })

				// setTimeout(() => {
				// 	uni.hideLoading()
				// 	console.log(val)
				// 	this.value = val
				// 	// 关闭窗口后，恢复默认内容
				// 	this.$refs.inputDialog.close()
				// }, 3000)
			},
			shareToggle() {
				this.$refs.share.open()
			},
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},
			handleJiaoLiuQun() {
				this.$modal.showToast('QQ群：①133713780、②146013835')
			},
			handleBuilding() {
				this.$modal.showToast('模块建设中~')
			},
			async getVideoData() {
				return await getVideoUrl(this.canvasBool ? this.userInfo.deviceId : this.userInfo.id).then(res => {
					this.urlData = res.data
					this.$refs.VideoDialog.open()
				})
			},
			close() {
				this.$refs.VideoDialog.close()
			},
			goLiveid(item) {
				if (item.status!=1) {
					this.$modal.showToast('当前视屏通道不在线！')
					return false
				}
				wx.request({
					url: 'https://open.ys7.com/api/lapp/token/get?appKey=1f1d31c45b9e4282ac2e54264811330c&appSecret=d0c204b18af15a0f094f0ada419c44a2',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					method: 'post',
					success: (res) => {
						this.accessToken = res.data.data.accessToken;
						this.goLive(item)
					}
				})
			},
			goVideo() {
				// this.$tab.navigateTo('/pages/device/video/index?id='+ this.userInfo.id)
				// /iot/camera/getCameraByDeviceId?deviceId=
				this.getVideoData()
			},
			goLive(item) {
				wx.navigateToMiniProgram({
					appId: 'wxf2b3a0262975d8c2',
					// this.url = 'rtmp://open.ys7.com/BB4574902/1/live'
					// path: 'pages/live/live?accessToken=' + this.accessToken + '&deviceSerial=BB4574902&channelNo=1',
					path: 'pages/live/live?accessToken=' + this.accessToken + '&deviceSerial=' + 
					item.deviceSerial + '&channelNo=' + item.channelNo,
					success(res) {
						// 打开成功
					}
				})
			},
			goDetail() {
				this.$tab.navigateTo(`/pages/device/oldDetail?deviceName=${this.userInfo.deviceName}`)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}
	.VideoDialog{
		width: 80vw;
		height: auto;
		background-color: #ffffff;
		padding: 50rpx 20rpx;
		&-title{
			text-align: center;
			font-size: 28rpx;
		}
		&-item{
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			&-btn1{
				padding: 12rpx 20rpx;
				font-size: 30rpx;
				border-radius: 5rpx;
				color: #ffffff;
				&.success{
					background-color: #18bc37;
				}
				&.error{
					background-color: #8f939c;
				}
			}
		}
		&-close{
			margin-top: 40rpx;
			width: 100%;
			text-align: center;
			border-radius: 5rpx;
			font-size: 28rpx;
			padding: 20rpx 0;
			background-color: #ffffff;
			color: #000000;
			border: 1px solid #cbc0c0;
		}
		// .gridItem{
		// 	width: 25%;
		// }
		// .grid-item-box {
		// 		flex: 1;
		// 		// position: relative;
		// 		/* #ifndef APP-NVUE */
		// 		display: flex;
		// 		/* #endif */
		// 		flex-direction: column;
		// 		align-items: center;
		// 		justify-content: center;
		// 		padding: 15px 0;
		// 	}

	}
	.btns{
		display: flex;
		justify-content: space-between;
		gap: 10rpx;
	}
	.queryVideo {
		flex: 1;
		// width: 100rpx;
		line-height: 56rpx;
		border-radius: 8rpx;
		color: #409eff;
		background: #ecf5ff;
		border-color: #b3d8ff;
		border: 1rpx solid #3c96f3;
		padding: 5rpx;
		text-align: center;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			padding: 15px 15px 45px 15px;
			background-color: #3c96f3;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				margin-right: 10px;
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;
				margin-right: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}

	.info-box {
		// margin: 20px;
		padding: 10px;
		background-color: #f0f0f0;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.info-title {
		font-size: 12px;
		font-weight: bold;
		margin-right: 5px;
	}

	.info-content {
		font-size: 12px;
		margin-bottom: 5px;
	}

	.help-container {
		margin-bottom: 100rpx;
		padding: 30rpx;
	}

	.list-title {
		margin-bottom: 30rpx;
	}

	.childList {
		background: #ffffff;
		box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
		border-radius: 16rpx;
		margin-top: 10rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #F5F5F5;
	}

	.text-title {
		color: #303133;
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 10rpx;

		// .iconfont {
		//   font-size: 16px;
		//   margin-right: 10rpx;
		// }
	}

	.text-item {
		font-size: 28rpx;
		padding: 24rpx;
	}

	.question {
		color: #606266;
		font-size: 28rpx;
	}
</style>